<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>用户注册</title>
    <meta name="keywords" th:content="${SITE_CONFIG.SITE_KWD}">
    <meta name="description" th:content="${SITE_CONFIG.SITE_DESC}">

    <link rel="stylesheet" th:href="@{/libs/font-icon/icon.css}"/>
    <link rel="stylesheet" th:href="@{/css/style.css}"/>
</head>
<body>
<div class="content">
    <div id="comment" class="comment-main">
        <ul class="nav nav-tabs">
            <li role="register" class="active"><a role="tab" data-toggle="tab" href="#person" onclick="setHeight('0')">个人用户</a>
            </li>
            <li role="register"><a href="#business" role="tab" data-toggle="tab" onclick="setHeight('1')">企业用户</a></li>
        </ul>
        <div class="tab-content">
            <div role="regist—panel-person" class="tab-pane active" id="person">
                <div class="login-main-sub">
                    <div class="login-logo">
                        <div>
                            <img th:src="@{/cweb/img/login-logo.png}">
                        </div>
                        <div>
                            个人注册
                        </div>
                    </div>
                    <div class="login-center">
                        <div class="form-group form-inline">
                            <input type="text" class="form-control" id="username" name="username" onkeypress="return regist_hcsj(event);"
                                   placeholder="手机号码">
                        </div>

                        <div class="form-group form-inline">
                            <input type="text" class="form-control" id="verification-font" name="verification" placeholder="验证码" onkeypress="return regist_hcsj(event);"
                                   style="width: 68%">
                            <img class="pointer vcode-img" style="width: 30%; height: 44px; display: inline">
                        </div>

                        <div class="form-group form-inline">
                            <input type="text" class="form-control" id="phonecode" name="phonecode"
                                   placeholder="短信验证码" style="width: 68%">
                            <button type="button" id="code_button" class="btn btn-primary"
                                    style="width: 30%; height: 44px">获取验证码
                            </button>
                        </div>
                        <div class="form-group form-inline">
                            <input type="text" class="form-control" id="nicname" name="nicname" placeholder="姓名" onkeypress="return regist_hcsj(event);">
                        </div>
                        <div class="form-group form-inline">
                            <input type="password" class="form-control" id="password" name="password" onkeypress="return regist_hcsj(event);"
                                   placeholder="密码">
                        </div>
                        <div class="form-group form-inline">
                            <input type="password" class="form-control" id="compassword" placeholder="确认密码" onkeypress="return regist_hcsj(event);">
                        </div>

                        <div class="checkbox">
                            <label>
                                <input id="agreement" type="checkbox"> <a href="javascript:agreement();">《中科碳和平台用户注册及服务协议》</a>
                            </label>
                        </div>
                        <button type="button" id="person_regist_button" class="btn btn-primary l-bth">注册</button>
                    </div>
                    <hr/>
                    <div class="login-footer">
                        <div class="no-text">已有帐号？</div>
                        <button type="button" id="regist_login" class="btn btn-primary">登录</button>
                    </div>
                </div>
            </div>
            <div role="regist—panel-business" class="tab-pane" id="business">
                <div class="login-main-sub">
                    <div class="login-logo">
                        <div>
                            <img th:src="@{/cweb/img/login-logo.png}">
                        </div>
                        <div>
                            企业注册
                        </div>
                    </div>
                    <div class="login-center">
                        <div class="form-group form-inline">
                            <input type="text" class="form-control" id="qy_username" name="username" onkeypress="return qy_regist_hcsj(event);"
                                   placeholder="手机号码">
                        </div>
                        <div class="form-group form-inline">
                            <input type="text" class="form-control" id="qy-verification-font" name="verification" placeholder="验证码" onkeypress="return qy_regist_hcsj(event);"
                                   style="width: 68%">
                            <img class="pointer vcode-img" style="width: 30%; height: 44px; display: inline">
                        </div>
                        <div class="form-group form-inline">
                            <input type="text" class="form-control" id="qy_phonecode" name="phonecode"
                                   placeholder="短信验证码" style="width:68%">
                            <button type="button" id="qy_code_button" class="btn btn-primary"
                                    style="width: 30%;height: 44px">获取验证码
                            </button>
                        </div>

                        <div class="form-group form-inline">
                            <input type="text" class="form-control" id="qy_companyname" name="companyname" onkeypress="return qy_regist_hcsj(event);"
                                   placeholder="公司名称">
                        </div>

                        <div class="form-group form-inline">
                            <input type="text" class="form-control" id="qy_deptname" name="deptname" onkeypress="return qy_regist_hcsj(event);"
                                   placeholder="部门名称">
                        </div>

                        <div class="form-group form-inline">
                            <input type="text" class="form-control" id="qy_nicname" name="nicname" placeholder="姓名" onkeypress="return qy_regist_hcsj(event);">
                        </div>

                        <div class="form-group form-inline">
                            <input type="text" class="form-control" id="qy_industry" name="industry" onkeypress="return qy_regist_hcsj(event);"
                                   placeholder="所属行业">
                        </div>

                        <div class="form-group form-inline">
                            <select id="qy_province" class="form-control" onkeypress="return qy_regist_hcsj(event);">
                                <option value="">省份</option>
                            </select>
                        </div>

                        <div class="form-group form-inline">
                            <select id="qy_city" class="form-control" onkeypress="return qy_regist_hcsj(event);">
                                <option value="">城市</option>
                            </select>
                        </div>

                        <div class="form-group form-inline">
                            <input type="password" class="form-control" id="qy_password" name="password" onkeypress="return qy_regist_hcsj(event);"
                                   placeholder="密码">
                        </div>
                        <div class="form-group form-inline">
                            <input type="password" class="form-control" id="qy_compassword" placeholder="确认密码" onkeypress="return qy_regist_hcsj(event);">
                        </div>

                        <div class="checkbox">
                            <label>
                                <input id="qy_agreement" type="checkbox"> <a href="javascript:agreement();">《中科碳和平台用户注册及服务协议》</a>
                            </label>
                        </div>
                        <button type="button" id="qy_regist_button" class="btn btn-primary l-bth">注册</button>
                    </div>
                    <hr/>
                    <div class="login-footer">
                        <div class="no-text">已有帐号？</div>
                        <button type="button" id="qy_regist_login" class="btn btn-primary">登录</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    pagecode = '[[${pagecode}]]';

    $(function () {
        $('#code_button').click(function () {
            let username = $('#username').val();
            if (!username) {
                layer.msg("请输入手机号！")
                return;
            }
            if (!checkPhone(username)) {
                layer.msg("请输入正确的手机号！")
                return;
            }


            let verification_font = $('#verification-font').val();
            if (!verification_font) {
                layer.msg("请输入验证码！")
                return;
            }

            //发送验证码
            sendCode(username, $(this), verification_font);
        });

        $('#person_regist_button').click(function () {
            registConfirm();
        });


        $('#regist_login').click(function () {
            userLogin();
        });

        $('#qy_regist_login').click(function () {
            userLogin();
        });

        $(".vcode-img").on('click', function () {
//            var url = '/Creditgt.jpg?d='+Math.random();
//            $(this).attr('src',url);
            $(".vcode-img").attr('src', (ctx + '/verificationCode?').replace('//', '/') + Math.floor(Math.random() * 100));
        });

        $(".vcode-img").click();
    });

    function registConfirm() {
        let agreement = $('#agreement:checked');
        if (agreement.length == 0) {
            layer.msg("请勾选协议！")
            return;
        }
        let username = $('#username').val();
        if (!username) {
            layer.msg("请输入手机号！")
            return;
        }

        if (!checkPhone(username)) {
            layer.msg("请输入正确的手机号！")
            return;
        }

        let phonecode = $('#phonecode').val();

        if (!phonecode) {
            layer.msg("请输入验证码！")
            return;
        }

        let nicname = $('#nicname').val();
        if (!nicname) {
            layer.msg("请输入昵称！")
            return;
        }

        let password = $('#password').val();
        let compassword = $('#compassword').val();
        if (!password) {
            layer.msg("请输入密码！")
            return;
        }

        if (compassword != password) {
            layer.msg("确认密码与密码不一致！")
            return;
        }

        //提交注册信息
        Core.postAjax("/blog/api/regist/input", {
            username: username,
            phonecode: phonecode,
            nicname: nicname,
            password: password
        }, function (data) {
            layer.msg(data.msg, {
                offset: '30%',
                time: 800
            }, function () {
                if (data.status == 200) {
                    userLogin();
                }
            });
        });

    }

    function sendCode(phone, obj, code) {
        Core.postAjax("/blog/api/sendcode", {
            phone: phone,
            code: code
        }, function (data) {
            layer.msg(data.msg, {
                offset: '30%',
                time: 800
            }, function () {
                if (data.status == 200) {
                    console.info(data);
                    obj.attr('disabled', 'disabled');
                    let i = 60;
                    let codeButtonInterval = setInterval(function () {
                        obj.text(i-- + "s");
                        if (i == 0) {
                            obj.text("重新获取");
                            obj.attr('disabled', false);
                            clearInterval(codeButtonInterval);
                        }
                    }, 1000);
                } else if (data.status == 500) {
                    $(".vcode-img").click();
                }
            });
        })
    }

    /*企业用户注册*/
    $(function () {
        let qy_province = $('#qy_province');
        let qy_province_api = 'http://datavmap-public.oss-cn-hangzhou.aliyuncs.com/areas/csv/100000_province.json';
        $.ajax({
            url: qy_province_api,
            dataType: 'json',
            type: 'get',
            success: function (r) {
                let datas = r.rows;
                //排序
                datas.sort(by('adcode'));
                //填充到省的选择框

                for (let i = 0; i < datas.length; i++) {
                    let p = datas[i];
                    let pOption = $('<option value="' + p.adcode + '">' + p.name + '</option>');
                    qy_province.append(pOption);
                }
            }
        });

        qy_province.change(function () {
            let qy_city = $('#qy_city');
            qy_city.empty();
            qy_city.append('<option value="">请选择城市</option>');
            let pValue = qy_province.val();
            let qy_city_api = 'http://datavmap-public.oss-cn-hangzhou.aliyuncs.com/areas/csv/' + pValue + '_city.json';
            $.ajax({
                url: qy_city_api,
                dataType: 'json',
                type: 'get',
                success: function (r) {
                    let datas = r.rows;
                    //排序
                    datas.sort(by('adcode'));
                    //填充到市区的选择框

                    for (let i = 0; i < datas.length; i++) {
                        let c = datas[i];
                        let cOption = $('<option value="' + c.name + '">' + c.name + '</option>');
                        qy_city.append(cOption);
                    }
                }
            });
        });

        $('#qy_code_button').click(function () {
            let username = $('#qy_username').val();
            if (!username) {
                layer.msg("请输入手机号！")
                return;
            }
            if (!checkPhone(username)) {
                layer.msg("请输入正确的手机号！")
                return;
            }
            let qy_verification_font = $('#qy-verification-font').val();
            if (!qy_verification_font) {
                layer.msg("请输入验证码！")
                return;
            }

            //发送验证码
            sendCode(username, $(this), qy_verification_font);
        });

        $('#qy_regist_button').click(function () {
            qyRegistConfirm();
        });


    });

    function qyRegistConfirm() {
        let agreement = $('#qy_agreement:checked');
        if (agreement.length == 0) {
            layer.msg("请勾选协议！")
            return;
        }
        let username = $('#qy_username').val();
        if (!username) {
            layer.msg("请输入手机号！")
            return;
        }

        if (!checkPhone(username)) {
            layer.msg("请输入正确的手机号！")
            return;
        }

        let phonecode = $('#qy_phonecode').val();

        if (!phonecode) {
            layer.msg("请输入验证码！")
            return;
        }

        //公司名称
        let companyname = $('#qy_companyname').val();
        if (!companyname) {
            layer.msg("请输入公司名称！")
            return;
        }

        //部门名称
        let deptname = $('#qy_deptname').val();
        if (!deptname) {
            layer.msg("请输入部门名称！")
            return;
        }

        let nicname = $('#qy_nicname').val();
        if (!nicname) {
            layer.msg("请输入姓名！")
            return;
        }

        //所属行业
        let industry = $('#qy_industry').val();
        if (!industry) {
            layer.msg("请输入所属行业！")
            return;
        }
        //所属省份

        let province = $('#qy_province').val();
        if (!province) {
            layer.msg("请选择所属省份！")
            return;
        }

        //所属城市
        let city = $('#qy_city').val();
        if (!city) {
            layer.msg("请选择所属城市！")
            return;
        }

        let password = $('#qy_password').val();
        let compassword = $('#qy_compassword').val();
        if (!password) {
            layer.msg("请输入密码！")
            return;
        }

        if (compassword != password) {
            layer.msg("确认密码与密码不一致！")
            return;
        }

        let province_value = $('#qy_province').find('option:checked').text();

        //提交注册信息
        Core.postAjax("/blog/api/regist/input", {
            username: username,
            phonecode: phonecode,
            nicname: nicname,
            password: password,
            companyname: companyname,
            deptname: deptname,
            industry: industry,
            province: province_value,
            city: city
        }, function (data) {
            layer.msg(data.msg, {
                offset: '30%',
                time: 800
            }, function () {
                if (data.status == 200) {
                    userLogin();
                }
            });
        });

    }

    by = function (name) {
        return function (o, p) {
            let a, b;
            if (typeof o === "object" && typeof p === "object" && o && p) {
                a = o[name];
                b = p[name];
                if (a === b) {
                    return 0;
                }
                if (typeof a === typeof b) {
                    return a < b ? -1 : 1;
                }
                return typeof a < typeof b ? -1 : 1;
            } else {
                throw ("error");
            }
        }
    }

    function setHeight(type) {
        if ('1' == type) {
            $('.zeromodal-container').css('height', 1020);
            $('.zeromodal-body').css('height', 1010);
            $('.zeromodal-body').css('width', 800);
            $('.zeromodal-container').css('width', 800);
            $('.zeromodal-container').css('left', 530);
        } else {
            $('.zeromodal-container').css('height', 720);
            $('.zeromodal-body').css('height', 710);
            $('.zeromodal-container').css('left', 669);
            $('.zeromodal-body').css('width', 465);
            $('.zeromodal-container').css('width', 465);
        }

    }

    function agreement() {
        zeroModal.show({
            title: '',
            width: '800px',
            url: '[[@{/blog/agreement}]]',
            height: '650px',
        });
    }


    //回车
    function regist_hcsj(e) {
        let keyCode = null;

        if (e.which) {
            keyCode = e.which;
        } else if (e.keyCode) {
            keyCode = e.keyCode;
        }

        if (keyCode == 13) {
            registConfirm();
            return false;
        }

        return true;
    }

    //回车
    function qy_regist_hcsj(e) {
        let keyCode = null;

        if (e.which) {
            keyCode = e.which;
        } else if (e.keyCode) {
            keyCode = e.keyCode;
        }

        if (keyCode == 13) {
            qyRegistConfirm();
            return false;
        }

        return true;
    }


</script>
</body>
</html>